<template>
  <div :class="`knowledge-stack-${itemType}`" ref="knowledgeStack">
    <template v-for="(item,index) in itemStack">
      <knowledge-item-div :key="item.content + index" :type="itemType" :content="item.content" size-type="small"></knowledge-item-div>
    </template>
  </div>
</template>

<script>
import KnowledgeItemDiv from "@/components/KnowledgeItemDiv";

export default {
  name: "KnowledgeItemStack",
  components: {KnowledgeItemDiv},
  props: {
    itemStack: Array,
    itemType: String,
    moveDownTime: Number
  },
  methods: {
    moveDownKnowledgeStack() {
      this.$refs.knowledgeStack.classList.add('knowledge-stack-move-down');
    }
  },
  watch: {
    moveDownTime(val) {
      if (val === 0) {
        this.$refs.knowledgeStack.classList.remove('knowledge-stack-move-down');
        return;
      }
      this.moveDownKnowledgeStack();
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/scss/div.scss";
@import "../assets/scss/animate.scss";
@import "../assets/scss/color.scss";
@import "../assets/scss/layout.scss";

@mixin knowledge-stack() {
  position: absolute;
  overflow: hidden;
  max-height: 1260px;
  top: 165px;
  user-select: none;
}

.knowledge-stack-word {
  @include knowledge-stack();
  left: 31px;
}

.knowledge-stack-grammar {
  @include knowledge-stack();
  right: 15px;
}

.knowledge-stack-move-down {
  @include move-down-animate(word-move-down, 126px);
}
</style>